<template>
  <div class="high-speed-rail-management-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>供电系统安全天</span>
      </div>
      <!-- 标题栏 -->

      <el-scrollbar>
        <div class="content">
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[0] ? dealSafeDayNum(dataList[0].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[0] ? dataList[0].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[1] ? dealSafeDayNum(dataList[1].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[1] ? dataList[1].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[2] ? dealSafeDayNum(dataList[2].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[2] ? dataList[2].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[3] ? dealSafeDayNum(dataList[3].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[3] ? dataList[3].deptName : '暂无' }}</span>
          </div>
          <div class="card-style-middle">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background-middle.png')"
            >
            <span class="card-num">{{ dataList[4] ? dealSafeDayNum(dataList[4].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[4] ? dataList[4].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[5] ? dealSafeDayNum(dataList[5].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[5] ? dataList[5].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[6] ? dealSafeDayNum(dataList[6].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[6] ? dataList[6].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[7] ? dealSafeDayNum(dataList[7].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[7] ? dataList[7].deptName : '暂无' }}</span>
          </div>
          <div class="card-style">
            <img
              class="card-background"
              :src="require('@/assets/images/jjxt/index/jjxt-index-psssd-num-background.png')"
            >
            <span class="card-num">{{ dataList[8] ? dealSafeDayNum(dataList[8].safeDay) : '0000' }}</span>
            <span class="card-title">{{ dataList[8] ? dataList[8].deptName : '暂无' }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getPowerSupplySystemSafeDayDataList } from '@/api/jjxt';
export default {
  data() {
    return {
      // 返回值
      dataList: []
    };
  },
  mounted() {
    this.getPowerSupplySystemSafeDayDataList(); // 首页单位安全天数展示接口
  },
  methods: {
    // 处理天数统计数
    dealSafeDayNum(num) {
      if (num < 10) {
        return '000' + num;
      } else if (num < 100) {
        return '00' + num;
      } else if (num < 1000) {
        return '0' + num;
      } else {
        return num;
      }
    },

    // 首页单位安全天数展示接口
    getPowerSupplySystemSafeDayDataList() {
      getPowerSupplySystemSafeDayDataList().then(res => {
        this.dataList = res.data;
        // for (let i = 0; i < 13; i++) {
        //   this.dataList.push({ safeDay: 0, deptName: '测试' })
        //   i++
        // }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.high-speed-rail-management-style {
  position: relative;
  color: white;
  width: 470px;
  height: 354px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.8);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      // height: 70px;
      margin-top: 22px;
      margin-bottom: 16px;
      align-items: center;
      display: flex;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 17px;
      }
    }
    .el-scrollbar {
      position: absolute;
      top: 59px;
      left: 0;
      right: 0;
      bottom: 0;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .content {
      padding: 0 5px 0 5px;
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      .card-style {
        position: relative;
        width: 132px;
        height: 55px;
        margin: 5px 10px;
        box-sizing: border-box;
        text-align: center;
        // border: 1px solid #0b62a3;
        .card-background {
          position: absolute;
          top: 0;
          left: 0;
          width: 132px;
          height: 55px;
        }
        .card-num {
          position: absolute;
          top: 6.5px;
          right: 12px;
          font-size: 26px;
          letter-spacing: 10px;
          line-height: 25px;
          color: #eaea4d;
        }
        .card-title {
          position: absolute;
          top: 34px;
          left: 0;
          right: 0;
          font-size: 14px;
        }
      }
      .card-style-middle {
        position: relative;
        width: 146px;
        height: 62px;
        margin: 7px 3px 7px 3px;
        box-sizing: border-box;
        text-align: center;
        // border: 1px solid #0b62a3;
        .card-background {
          // position: absolute;
          // top: 50%;
          // margin-top: 0;
          // left: 0;
          width: 146px;
          height: 62px;
        }
        .card-num {
          position: absolute;
          top: 9px;
          right: 13.5px;
          font-size: 26px;
          letter-spacing: 12px;
          line-height: 25px;
          color: #f68c04;
        }
        .card-title {
          position: absolute;
          top: 40px;
          left: 0;
          right: 0;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
